<template>
	<view>
		<view class="preview-body">
			<view class="list" v-for="(item,index) in dataList" :key="index">
				<view class="title">
					<text class="mast-text" v-if="item.must_status == 1">*</text>{{index+1}}.{{item.value}}
				</view>
				<view class="content" v-if="item.type == 'username'">
					<input class="input-text" v-if="resultData[index].hide == false" placeholder-class="p-class"  v-model="resultData[index].name" disabled="true"  type="text" />
					<text class="mast-text" v-else>不公开显示</text>
				</view>
				<view class="content" v-if="item.type == 'number' || item.type == 'id_card'
				|| item.type == 'email' || item.type == 'digit' || item.type == 'chinese' || item.type == 'english' || item.type == 'en_number'">

					<input class="input-text" v-if="resultData[index].hide == false" placeholder-class="p-class" v-model="resultData[index].value" type="text" disabled="true"  />
					<text class="mast-text" v-else>不公开显示</text>
				</view>
				<view class="content" v-if="item.type == 'phone'">
					<view class="input-text makephone" v-if="resultData[index].hide == false" @tap="makePhone(resultData[index].value)">{{resultData[index].value}}</view>

					<text class="mast-text" v-else>不公开显示</text>
				</view>

				<view class="content" v-if="item.type == 'radio'">
					<view  v-if="resultData[index].hide == false">
					<view class="radio-0" v-for="(radioItem,radioIndex) in item.ext" :key="radioIndex" >
						<view class="icon-left" >
							<text class="iconfont icon-danxuan1-xuanzhong " v-if="(resultData[index].value) == radioIndex.toString()"></text>
							<text class="iconfont icon-danxuan1" v-else></text>
						</view>
						<view class="right-content">{{radioItem}}</view>
					</view>
					</view>
					<text class="mast-text" v-else>不公开显示</text>
				</view>
				<view class="content" v-if="item.type == 'text'">
					<input class="input-text" v-if="resultData[index].hide == false" placeholder-class="p-class" disabled="true" v-model="resultData[index].value" type="text"/>
					<text class="mast-text" v-else>不公开显示</text>
				</view>

				<view class="content" v-if="item.type == 'textarea'">
					<view class="text-area" v-if="resultData[index].hide == false">
						<textarea class="show-textarea"  :show-confirm-bar="true" placeholder-class="p-class"
						maxlength="-1" v-model="resultData[index].value" disabled="true"/>
					</view>
					<text class="mast-text" v-else>不公开显示</text>
				</view>

				<view class="content" v-if="item.type == 'qianming'">
					<view class="qianming" v-if="resultData[index].hide == false" >
						<view  >
							<image class="qm-image" :src="resultData[index].value">
						</view>

					</view>
					<text class="mast-text" v-else>不公开显示</text>
				</view>


				<view class="content" v-if="item.type == 'checkbox'">
					<view v-if="resultData[index].hide == false">
					<view class="radio-0 checkbox-0" v-for="(checkItem,checkIndex) in item.ext" :key="checkIndex"  >
						<view class="icon-left">
							<text class="iconfont icon-xuanzhong" v-if="(resultData[index]) && (resultData[index].value.indexOf(checkIndex.toString())) > -1"></text>
							<text class="iconfont icon-weixuanzhong" v-else></text>
						</view>
						<view class="right-content">{{checkItem}}</view>
					</view>
					</view>
					<text class="mast-text" v-else>不公开显示</text>
				</view>

				<view class="content" v-if="item.type == 'date'">
					<view class="sel-time" v-if="resultData[index].hide == false" >
						<view >{{resultData[index].value}}</view>

					</view>
					<text class="mast-text" v-else>不公开显示</text>
				</view>

				<view class="content" v-if="item.type == 'time'">
					<view class="sel-time" v-if="resultData[index].hide == false">
						<view >{{resultData[index].value?resultData[index].value:''}}</view>

					</view>
					<text class="mast-text" v-else>不公开显示</text>
				</view>

				<view class="content" v-if="item.type == 'datetime'">
					<view class="sel-time"  v-if="resultData[index].hide == false" >
						<view>{{resultData[index].value?resultData[index].value:''}}</view>

					</view>
					<text class="mast-text" v-else>不公开显示</text>
				</view>

				<view class="content" v-if="item.type == 'city'">
					<view class="sel-time" v-if="resultData[index].hide == false">
						<view >
							<picker mode="region" :data-index="index" disabled="true">
							    <view>{{resultData[index].value.value?resultData[index].value.value:''}} </view>
						    </picker>
						</view>
					</view>
					<text class="mast-text" v-else>不公开显示</text>
				</view>

				<view class="content" v-if="item.type == 'address'">
					<view class="sel-address" >
						<view class="show-address" v-if="resultData[index].hide == false" @tap="openLocation(index)">
							{{resultData[index].value.address?resultData[index].value.address:''}}
						</view>
						<text class="mast-text" v-else>不公开显示</text>
					</view>
				</view>

				<view class="content" v-if="item.type == 'position'">
					<view class="sel-address">
						<view class="show-address" v-if="resultData[index].hide == false">
							{{resultData[index].value.address?resultData[index].value.address:''}}
						</view>
						<text class="mast-text" v-else>不公开显示</text>
					</view>
				</view>


				<view class="content" v-if="item.type == 'image'">
					<wzf-image-upload :dataType="0" v-if="resultData[index].hide == false" :max="item.ext.type == 1?1:9" mediaType="image" :chooseNum="item.ext.type == 1?1:9"
					 @chooseSuccess="chooseSuccess" @imgDelete="chooseDelete" :remove="false" :add="false" v-model="resultData[index].value" :index="index"></wzf-image-upload>
					<text class="mast-text" v-else>不公开显示</text>
				</view>


				<view class="content" v-if="item.type == 'video'">
					<wzf-image-upload v-if="resultData[index].hide == false"  :dataType="0" :max="1" mediaType="video" name="file" :chooseNum="1" :index="index"
					@chooseSuccess="chooseSuccess" @imgDelete="chooseDelete" v-model="resultData[index].value" :remove="false" :add="false"
					></wzf-image-upload>
					<text class="mast-text" v-else>不公开显示</text>
				</view>

				<view class="content" v-if="item.type == 'file'">
					<view class="docx">
						<view class="doc_title" @tap="openFile(index)" v-if="resultData[index].hide == false" >{{resultData[index].value.name}}</view>
						<text class="mast-text" v-else>不公开显示</text>
					</view>
				</view>
				
				
			</view>
			<view class="zhanwei"></view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		name:'show-res-form',
		components:{
			
		},
		data() {
			return {
				
			}
		},
		props:{
			dataList:{
				type:Array,
				default:[]
			},
			resultData:{
				type:Array,
				default:[]
			}
		},
		mounted:function(){
		},
		methods: {
			openLocation(index){
				var info = this.resultData[index]?this.resultData[index]:{};
				var content = info.value?info.value:'';
				if(content)
				{
					this.$api.openLocation(content.lat,content.lng,{
						address:content.address?content.address:'' 
					});
				}
			},
			makePhone(phone)
			{
				if(phone == '' || !phone)
				{
					return ;
				}
				this.$api.makePhone(phone);
			},
			//删除回调
			chooseDelete(e){
				console.log(e,'chooseDelete');  //a 
				this.resultData[e.index].value = e.tempFilePaths;
				this.$emit('resultDataSave',JSON.parse(JSON.stringify(this.resultData)))
				//this.$forceUpdate();    
			},
			//初始化提交结果
			openFile(index){
				var info = this.resultData[index];
				var path = info.value.path;
				this.$api.openFile(path);
			},
			
		},
		
	}
</script>

<style lang="scss"> 
	.mast-text{
		color: red;
		font-size: 26rpx;
	}
	
	.preview-body{
		background-color: #ffffff;
		width: 94%;
		margin: 3%;
		border-radius: 20rpx;
		.p-class{
			font-size: 24rpx;
		}
		
		.list{
			border-bottom: 2rpx solid #eee;
			padding: 0rpx 20rpx;
			.content{
				height: auto;
				word-break:break-all;
				padding-bottom: 10rpx;
				.sel-button{
					background-color: #458EF5;
					width: 150rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					color: #ffffff;
					border-radius: 15rpx;
					font-size: 24rpx;
				}
				.text-area{
					.show-textarea{
						width: 100%;
						border: 2rpx solid #eee;
						border-radius: 10rpx;
						padding: 20rpx 10rpx;
					}
				}
				.qianming{
					width: 100%;
					height: 300rpx;
					background: #F4F4F4;
					border-radius: 10rpx;
					position: relative;
					.qianming-text{
						position: absolute;
						width: 100%;
						text-align: center;
						top: 140rpx;
						letter-spacing: 6rpx;
						font-size: 28rpx;
					}
					.qm-image{
						width: 100%;
						height: 300rpx;
					}
					.closeempty{
						position: absolute;
						font-size: 44rpx;
						top: 4px;
						right: 10rpx;
					}
				}
				.sel-address{
					font-size: 26rpx;
					color: #807777;
					display: flex;
					align-items: center;
					.show-address{
						max-width: 100%;
					}
					.change-address{
						background-color: #458EF5;
						width: 150rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #ffffff;
						border-radius: 15rpx;
						font-size: 24rpx;
					}
					.margin-r{
						margin-left: 10rpx;
					}
				}
				.sel-time{
					height: 80rpx;
					line-height: 80rpx;
					font-size: 26rpx;
					color: #807777;
					position: relative;
					.iconfont{
						position: absolute;
						right: 0;
						top: 0;
					}
				}
				.docx{
					.doc_title{
						color: #3D5B7D;
						margin-bottom: 15rpx;
					}
					.sel-docx{
						background-color: #458EF5;
						width: 300rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #ffffff;
						border-radius: 15rpx;
						font-size: 26rpx;
					}
				}
				
				.radio-0{
					display: flex;
					align-items: center;
					min-height: 60rpx;
					.iconfont{
						font-size: 42rpx;
						color: $uni-btn-color;
					}
					.icon-left{
						margin-right: 10rpx;
					}
					.right-content{
						
					}
				}
				.checkbox-0{
					.iconfont{
						font-size: 30rpx;
						color: $uni-btn-color;
					}
				}
				.input-text{
					height: 60rpx;
				}
				.makephone{
					color: #8a8ae2;
				}
				
			}
			.title{
				height: 80rpx;
				line-height: 80rpx;
				overflow: hidden;
				font-size: 28rpx;
			}
		}
	}
	.add-check_s{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		z-index: 999;
		.add-check-title{
			height: 50rpx;
			line-height: 50rpx;
			padding-left: 30rpx;
			margin-top: 30rpx;
		}
		.scroll-y{
			height: 900rpx;
			border: 2rpx solid #eee;
			width: 96%;
			margin: 0rpx 3%;
			border-radius: 10rpx;
			padding: 20rpx;
			.scroll-view-item{
				width: 25%;
				.scroll-view-item-list{
					width: 90%;
					//background: #F4F4F4;
					margin: auto;
					margin-bottom: 16rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					overflow: hidden;
					color: #888888;
					border: 2rpx solid #999999;
				}
				.scroll-item-active{
					background: #89a77c;
					//background: #F4F4F4;
					color: #fff;
				}
				.scroll-item-disabled{
					background: #e0d6d6;
					color: #fff;
				}
			}
		}
		.add-check-button{
			position: absolute;
			left: 0;
			bottom: 100rpx;
			width: 100%;
			.add-check-cls{
				width: 220rpx;
				text-align: center;
				height: 70rpx;
				border-radius: 26rpx;
				line-height: 71rpx;
			}
			.add-check-cancel{
				border: 2rpx solid #8B988E;
				color: #8B988E;
				margin-left: 140rpx;
				margin-right: 50rpx;
			}
			.add-check-confirm{
				background-color: #61B080;
				color: #FFFFFF;
			}
		}
	}
</style>
